<template>

  <div class="zhanshi">

    <div v-if="this.active==='心率'" class="item-body xl">
      <div
        v-for="item of this.student_xl"
        :key="item.student_id"
        class="item"
      >
        <img src="@/assets/login_images/spam-fill.png" alt="" class="right">
        <span class="name">{{ item.student_name }}</span>
        <span class="num">{{ xl_list[item.mac] }}</span>
        <div class="bot">
          <span v-if="item.is_strive" class="b-item">
            <img src="@/assets/login_images/jiayou.png" alt="">
          </span>
          <span v-if="item.is_standard" class="b-item">
            <img src="@/assets/login_images/gou.png" alt="">
          </span>
        </div>
      </div>
    </div>

    <div v-if="this.active==='密度'" class="item-body md">
      <div
        v-for="item of this.student_md"
        :key="item.student_id"
        class="item"
      >
        <img src="@/assets/login_images/spam-fill.png" alt="" class="right">
        <span class="name">{{ item.student_name }}</span>
        <span class="num">{{ item.density }}</span>
      </div>
    </div>
    <div v-if="this.active==='强度'" class="item-body qd">
      <div
        v-for="item of this.student_qd"
        :key="item.student_id"
        class="item"
      >
        <img src="@/assets/login_images/spam-fill.png" alt="" class="right">
        <span class="name">{{ item.student_name }}</span>
        <span class="num">{{ item.intensity_per }}</span>
      </div>
    </div>

    <!-- <div v-else class="item-body">
      <div
        v-if="Object.keys(this.show_test).length!=0"
        class="item"
      >
        <img src="@/assets/login_images/spam-fill.png" alt="" class="right">
        <span class="name">展示案例</span>
        <span class="num">{{ this.show_test.nbHeartRate }}</span>
        <div class="bot">
          <span class="b-item">
            <img src="@/assets/login_images/jiayou.png" alt="">
          </span>
          <span class="b-item">
            <img src="@/assets/login_images/gou.png" alt="">
          </span>
        </div>
      </div>

      <div
        v-for="item of 4"
        :key="item"
        class="item grey"
      >
        <img src="@/assets/login_images/spam-fill.png" alt="" class="right">
        <span class="name">林俊杰</span>
        <span class="num">187</span>
        <div class="bot">
          <span class="b-item">
            <img src="@/assets/login_images/jiayou.png" alt="">
          </span>
          <span class="b-item">
            <img src="@/assets/login_images/gou.png" alt="">
          </span>
        </div>
      </div>
      <div
        v-for="item of 4"
        :key="item"
        class="item green"
      >
        <img src="@/assets/login_images/spam-fill.png" alt="" class="right">
        <span class="name">林俊杰</span>
        <span class="num">187</span>
        <div class="bot">
          <span class="b-item">
            <img src="@/assets/login_images/jiayou.png" alt="">
          </span>
          <span class="b-item">
            <img src="@/assets/login_images/gou.png" alt="">
          </span>
        </div>
      </div>
      <div
        v-for="item of 4"
        :key="item"
        class="item origin"
      >
        <img src="@/assets/login_images/spam-fill.png" alt="" class="right">
        <span class="name">林俊杰</span>
        <span class="num">187</span>
        <div class="bot">
          <span class="b-item">
            <img src="@/assets/login_images/jiayou.png" alt="">
          </span>
          <span class="b-item">
            <img src="@/assets/login_images/gou.png" alt="">
          </span>
        </div>
      </div>
      <div
        v-for="item of 4"
        :key="item"
        class="item red"
      >
        <img src="@/assets/login_images/spam-fill.png" alt="" class="right">
        <span class="name">林俊杰</span>
        <span class="num">187</span>
        <div class="bot">
          <span class="b-item">
            <img src="@/assets/login_images/jiayou.png" alt="">
          </span>
          <span class="b-item">
            <img src="@/assets/login_images/gou.png" alt="">
          </span>
        </div>
      </div>
    </div>

    -->

    <div class="footer">
      <span
        v-for="(item,index) of tabs"
        :key="index"
        :class="{'active':active===item}"
        class="f-item"
        @click="change_tabs(item)"
      >{{ item }}</span>

    </div>
  </div>

</template>

<script>
import Index from '@/api/index.js'
import { sendWebsocket, closeWebsocket } from '@/utils/websocket.js'
export default {
  name: 'ZhanShiZhengti',
  components: {
  },
  props: {
    class_value: [String, Number],
    starttime: [String]
  },
  data() {
    return {
      tabs: ['密度', '心率', '强度'],
      active: '心率',
      show_test: {},
      flag: false,
      timerObj: {}, // 计时器存储器
      timerId: 1, // 模拟计时器id，唯一性
      student_xl: [], // 心率
      student_md: [], // 密度
      student_qd: [], // 强度
      xl_list: {}
    }
  },
  watch: {
    'flag': function(val) {
      if (val) {
        this.first_start()
        this.requstWs()
        const that = this
        setTimeout(() => {
          that.start_xl()
        }, 7000)
      } else {
        this.stop()
      }
    }
  },
  mounted() {
    // console.log('ZhanShiZhengti mounted')
    // this.requstWs()
    // this.initWebSocket()
    // const data = {
    //   Mac: 'c0bafe58b7bc',
    //   nbHeartRate: '96'
    // }
    // this.$set(this.xl_list, data.Mac, data.nbHeartRate)
    // console.log(this.xl_list)
  },
  beforeDestroy() {
    // 页面销毁时关闭ws。因为有可能ws连接接收数据尚未完成，用户就跳转了页面
    // 在需要主动关闭ws的地方都可以调用该方法
    closeWebsocket()
  },
  methods: {
    change_tabs(index) {
      this.stop()
      this.active = index
      if (index === '心率') {
        this.start_xl()
      } else if (index === '密度') {
        this.start_md()
      } else {
        this.start_qd()
      }
    },
    requstWs() {
      // 防止用户多次连续点击发起请求，所以要先关闭上次的ws请求。
      closeWebsocket()
      // 跟后端协商，需要什么参数数据给后台
      // const userJson = {"mac":[1161458555,1161458554,1161458556,1161458557,1161458552,1161458553],"classId":11819188}

      // const userJson = { 'mac': ['c20a6178915c', 'fc3554b0d5ec', 'c0bafe58b7bc', 'cc13259973a4'], 'classId': 11819188 }

      // const data1 = 'SubUser ' + JSON.stringify(userJson)
      const data1 = 'SubUser ' + JSON.stringify(this.student_xl)
      // 发起ws请求
      sendWebsocket('ws://47.95.13.49:9001', data1, this.wsMessage, this.wsError)
    },
    // ws连接成功，后台返回的ws数据，组件要拿数据渲染页面等操作
    wsMessage(data) {
      // 这里写拿到数据后的业务代码
      console.log(data)
      // const array = []
      // this.student_xl.map(item => {
      //   if (item.mac === data.Mac) {
      //     console.log('a')
      //     item['nbHeartRate'] = data.nbHeartRate
      //   }
      //   array.push(item)
      // })
      // this.student_xl = array
      this.$set(this.xl_list, data.Mac, data.nbHeartRate)
      // {
      //   Mac: "c0bafe58b7bc",
      //   nbHeartRate: "96"
      // }
      // this.show_test = data
    },
    // ws连接失败，组件要执行的代码
    wsError() {
      // 比如取消页面的loading
    },
    async first_start() { // 先触发一次，设备6s才会上传数据 6s后再读取开始循环
      const data = {
        ClassID: this.class_value,
        StartTime: this.starttime
      }
      const result = await Index.GetStudent_StandardAndStrive_PerMinute(data) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.student_xl = result.result
      }
    },
    start_xl() {
      const id = this.timerId++
      this.timerObj[id] = true
      const that = this
      async function timerFn() {
        if (!that.timerObj[id]) return
        const data = {
          ClassID: that.class_value,
          StartTime: that.starttime
        }
        console.log(data)
        const result = await Index.GetStudent_StandardAndStrive_PerMinute(data) // 模拟请求
        if (result.code === window.g.SUCCESS_STATE) {
          that.student_xl = result.result
        }
        setTimeout(timerFn, 1000 * 6)
      }
      timerFn()
      console.log(this.timerObj)
    },
    start_md() {
      const id = this.timerId++
      this.timerObj[id] = true
      const that = this
      async function timerFn() {
        if (!that.timerObj[id]) return
        const data = {
          ClassID: that.class_value,
          StartTime: that.starttime
        }
        console.log(data)
        const result = await Index.GetStuden_heartRate_Density(data) // 模拟请求
        if (result.code === window.g.SUCCESS_STATE) {
          that.student_md = result.result
        }
        setTimeout(timerFn, 1000 * 6)
      }
      timerFn()
      console.log(this.timerObj)
    },
    start_qd() {
      const id = this.timerId++
      this.timerObj[id] = true
      const that = this
      async function timerFn() {
        if (!that.timerObj[id]) return
        const data = {
          ClassID: that.class_value,
          StartTime: that.starttime
        }
        console.log(data)
        const result = await Index.GetStudent_HeartRate_Intensity(data) // 模拟请求
        if (result.code === window.g.SUCCESS_STATE) {
          that.student_qd = result.result
        }
        setTimeout(timerFn, 1000 * 6)
      }
      timerFn()
      console.log(this.timerObj)
    },
    stop() {
      this.timerObj = {}
    }
  }
}
</script>

<style lang="scss" scoped>

.zhanshi{
  padding: 30px;
  background-color: white;
  .item-body{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .item{
      width: 160px;
      height: 167px;
      background: linear-gradient(352deg, #3965FF 0%, #00B0FF 100%);
      border-radius: 6px;
      opacity: 0.9;
      margin: 16px;
      display: flex;
      align-items: center;
      position: relative;
      .right{
        position: absolute;
        right: 12px;
        top: 12px;
        width: 30px;
        height: 30px;
        // background-color: black;
      }
      .name{
        position: absolute;
        top: 24px;
        left: 12px;
        font-size: 18px;
        color: white;
      }
      .num{
        text-align: center;
        width: 100%;
        font-size: 42px;
        color: white;
        font-weight: bold;
      }
      .bot{
        position: absolute;
        bottom: 3px;
        right: 0;
        display: flex;
        .b-item{
          width: 22px;
          height: 22px;
          // background-color: black;
          margin-right: 5px;
          img{
            width: 100%;
          }
        }
      }
      &.grey{
        background: linear-gradient(353deg, #B4B4B4 0%, #D9D9D9 100%);
      }
      &.green{
        background: linear-gradient(340deg, #00D2A0 0%, #00E34B 100%);
      }
      &.origin{
        background: linear-gradient(353deg, #FF6022 0%, #FFB100 100%);
      }
      &.red{
        background: linear-gradient(353deg, #F04864 0%, #FFBEC8 100%);
      }
    }
    // .item:nth-of-type(6n+1){
    //   margin-left: 0;
    // }
  }
  .footer{
    display: flex;
    width: fit-content;
    margin: 0 auto;
    .f-item{
      cursor: pointer;
      font-size: 16px;
      color: #41CB89;
      width: 100px;
      height: 32px;
      border-radius: 5px;
      text-align: center;
      line-height: 32px;
      background-color: white;
      box-shadow: 0px 2px 6px 0px white;
      &.active{
        color: white;
        background-color:#41CB89 ;
        box-shadow: 0px 2px 6px 0px rgba(40, 230, 139, 0.61);
      }
    }
  }
}

</style>
